@function pxToRem($val) {
    @return $val/100 + rem;
}

.cantainer {
    width: 100%;
    height: calc(100% - 1.2rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    .content {
        width: calc(100% - 0.4rem);
        height: calc(100% - 0.35rem);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            width: 22%;
            height: 100%;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-image: url(./../../assets/images/board/tunnel-gantry/board001.png);

            .title {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                em {
                    width: pxToRem(5);
                    height: pxToRem(20);
                    background: #fff;
                    margin-left: pxToRem(30);
                }

                span {
                    color: #FEFFFF;
                    font-size: pxToRem(16);
                    margin-left: pxToRem(15);
                    height: pxToRem(40);
                    padding-top: pxToRem(10);
                }
            }

            .num {
                width: 100%;
                color: #FEFFFF;
                font-size: pxToRem(16);
                margin-left: pxToRem(30);

                span {
                    color: #FCE701;
                    font-size: pxToRem(32);
                }

            }

            .sub {
                width: 98%;
                height: pxToRem(36);
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0 auto;
                background: rgba(255, 255, 255, 0.18);

                span {
                    width: 50%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #FEFEFE;
                    font-size: pxToRem(16);
                }

                span:first-child {
                    width: 40%;
                    margin-left: 10%;
                    justify-content: flex-start !important;
                }
            }

            ul {
                width: 98%;
                height: calc(100% - 1.5rem);
                margin: 0 auto;
                list-style: none;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                overflow-y: scroll;

                li {
                    width: 98%;
                    height: pxToRem(36);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 0 auto;
                    cursor: pointer;
                    // background: rgba(255, 255, 255, 0.18);
                    span {
                        width: 50%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: pxToRem(16);
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;

                    }

                    span:first-child {
                        color: #C1E9FD;
                        width: 40%;
                        margin-left: 10%;
                        justify-content: flex-start !important;
                    }

                    span:last-child {
                        color: #3CFC01;
                    }
                }

                li:nth-child(2n+1) {
                    background: rgba(255, 255, 255, 0.08);
                }

                .ative {
                    background: rgba(0, 150, 255, 0.13) !important;
                }
            }

            ul::-webkit-scrollbar {
                display: none;
            }
        }

        .right {
            width: calc(78% - 0.1rem);
            height: 100%;

            .top {
                width: 100%;
                height: pxToRem(650);
                display: flex;
                justify-content: space-between;
                align-items: center;

                .content_img {
                    width: pxToRem(900);
                    height: 100%;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    background-image: url(./../../assets/images/board/tunnel-gantry/board002.png);
                }

                .content_img {
                    margin-top: 10px;
                    width: pxToRem(900);
                    height: 100%;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    background-image: url(./../../assets/images/board/tunnel-gantry/board002.png);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;

                    .imgBox {
                        width: 90%;
                        height: 4rem;
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        position: relative;

                        .ganty_dh {
                            width: pxToRem(80);
                            height: auto;
                            position: absolute;
                            top: 0.5rem;
                            left: 1.8rem;
                            display: flex;
                            flex-direction: column;
                            align-items: center;

                            .img2 {
                                width: pxToRem(80);
                                height: pxToRem(30);
                            }

                            .path {
                                height: auto;
                                width: pxToRem(80);
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-top: pxToRem(-5);

                                .right {
                                    width: pxToRem(40);
                                    height: 100%;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    align-items: center;

                                    span {
                                        display: block;
                                        width: pxToRem(2);
                                        height: pxToRem(40);
                                        background: #979797;
                                    }
                                }

                                .left1 {
                                    width: pxToRem(40);
                                    height: 100%;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    align-items: center;

                                    span {
                                        display: block;
                                        width: pxToRem(2);
                                        height: pxToRem(40);
                                        background: #979797;
                                    }
                                }

                                .img1 {
                                    width: pxToRem(40);
                                    height: pxToRem(30);
                                    margin-top: pxToRem(-10);
                                }
                            }
                        }

                        .bridge_dh {
                            width: 0.8rem;
                            height: auto;
                            position: absolute;
                            top: 0.55rem;
                            display: flex;
                            flex-direction: column;
                            align-items: center;

                            .img2 {
                                width: 80px;
                                height:0.8rem;
                            }

                            .img1 {
                                width: 40px;
                                height: 0.6rem;
                            }

                            .path {
                                height: 40px;
                                width: 30px;
                            }
                        }

                        .bridge_dh1 {
                            left: 0.1rem;
                        }

                        .bridge_dh2 {
                            left: 1.2rem;
                        }
                    }

                    .gantyImg {
                        background-image: url(./../../assets/images/board/tunnel-gantry/gantry_01.png);
                    }

                    .bridgeImg {
                        background-image: url(./../../assets/images/board/tunnel-gantry/bridge_01.png);
                    }

                    .warn{
                        position: absolute;
                        left: 0.6rem;
                        bottom: 0.4rem;
                        width: 3rem;
                        height: 0.3rem;
                        ul{
                            width: 100%;
                            height: 100%;
                            list-style: none;
                            display: flex;
                            justify-content: space-between;
                            li{
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                height: 0.3rem;
                                em{
                                    width: 0.15rem;
                                    height: 0.15rem;
                                    margin-right: 0.2rem;
                                    background: #39F310;
                                    border-radius: 50%;
                                }
                                span{
                                    color: #00FFFF;
                                    font-size: 0.14rem;
                                }
                            }
                        }
                    }

                }

                .content_charts {
                    width: calc(100% - 9.1rem);
                    height: 100%;

                    .charts {
                        width: 100%;
                        height: pxToRem(320);
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        background-image: url(./../../assets/images/board/tunnel-gantry/board003.png);

                        .title {
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;

                            em {
                                width: pxToRem(5);
                                height: pxToRem(20);
                                background: #fff;
                                margin-left: pxToRem(30);
                            }

                            span {
                                color: #FEFFFF;
                                font-size: pxToRem(16);
                                margin-left: pxToRem(15);
                                height: pxToRem(40);
                                padding-top: pxToRem(10);
                            }
                        }

                        .charts_item {
                            width: 100%;
                            height: pxToRem(280);
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                        }

                        #pie {
                            width: 60%;
                            height: 100%;
                        }

                        ul {
                            width: 40%;
                            height: 100%;
                            display: flex;
                            list-style: none;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;

                            li {
                                width: 80%;
                                height: pxToRem(30);
                                display: flex;
                                justify-content: space-between;

                                em {
                                    width: pxToRem(15);
                                    height: pxToRem(15);
                                }

                                span {
                                    color: #D1EBFB;
                                }

                                .tags {
                                    width: pxToRem(100);
                                }
                            }
                        }
                    }

                    .others {
                        width: 100%;
                        height: pxToRem(320);
                        margin-top: pxToRem(10);
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                        background-image: url(./../../assets/images/board/tunnel-gantry/board003.png);

                        .title {
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            margin-bottom: pxToRem(10);

                            em {
                                width: pxToRem(5);
                                height: pxToRem(20);
                                background: #fff;
                                margin-left: pxToRem(30);
                            }

                            span {
                                color: #FEFFFF;
                                font-size: pxToRem(16);
                                margin-left: pxToRem(15);
                                height: pxToRem(40);
                                padding-top: pxToRem(10);
                            }
                        }

                        p {
                            width: 98%;
                            margin: 0 auto;
                            height: pxToRem(30);
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            cursor: pointer;
                            border-bottom: 1px solid #0D72DA;
                            padding: 0 pxToRem(10);
                            font-size: pxToRem(16);
                            color: #C1E9FD;

                            span {
                                width: pxToRem(200);
                                margin-right: pxToRem(50);
                            }

                            .num {
                                color: #3CFC01;
                            }
                        }
                    }
                }
            }

            .bottom {
                width: 100%;
                height: calc(100% - 6.6rem);
                margin-bottom: pxToRem(10);
                display: flex;
                justify-content: space-between;
                align-items: center;

                .items {
                    height: 100%;
                    width: 49.5%;
                    margin-top: pxToRem(10);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    background-image: url(./../../assets/images/board/tunnel-gantry/board004.png);

                    .title {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-bottom: pxToRem(10);

                        em {
                            width: pxToRem(5);
                            height: pxToRem(20);
                            background: #fff;
                            margin-left: pxToRem(30);
                        }

                        span {
                            color: #FEFFFF;
                            font-size: pxToRem(16);
                            margin-left: pxToRem(15);
                            height: pxToRem(40);
                            padding-top: pxToRem(10);
                        }
                    }

                    p {
                        width: 98%;
                        margin: 0 auto;
                        height: pxToRem(30);
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        cursor: pointer;
                        border-bottom: 1px solid #0D72DA;
                        padding: 0 pxToRem(10);
                        font-size: pxToRem(16);
                        color: #C1E9FD;

                        span {
                            width: pxToRem(200);
                            margin-right: pxToRem(50);
                        }

                        .num {
                            color: #3CFC01;
                        }
                    }

                    .active {
                        color: red;

                        .num {
                            color: red;
                        }
                    }
                }
                .bridge_item{
                     width: 33%;
                }
            }
        }
    }

    .no_data {
        width: 100%;
        height: calc(100% - 1.2rem);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: pxToRem(48);
        color: rgba(0, 255, 255, 1);
    }
}